<!-- <script type="text/javascript" src="../js/address.js"></script> -->
<script type="text/javascript">

	$(function () {
		getAddresses();
		gettProvice();
		$("#province").on("change", changeProvince);
		$("#city").on("change", changeCity);
	});
	//得到所有的收货地址
	function getAddresses() {
		$("#addressdata").empty();
		$.ajax({
			type: "get",
			url: "../ucenter/address",
			data: "opr=list",
			dataType: "json",
			beforeSend: function (r) {
				//加载层-默认风格
				layer.load();
			},
			success: function (result) {
				console.log("得到所有的收货地址")
				console.log(result)
				let html = template('tpl', {
					list: result
				});
				$("#addressdata").append(html);
			},
			complete: function (XMLHttpRequest, textStatus) {
				// alert('远程调用成功，状态文本值：'+textStatus);
				layer.closeAll('loading');
			},
			error: function () {
				layer.msg("系统繁忙，请稍后再试", { icon: 2 });
			}
		})
	}

	// 获取行政区域信息
	function gettProvice(pid) {
		$.ajax({
			type: "get",
			url: "../ucenter/address",
			data: "opr=province",
			dataType: "json",
			beforeSend: function (r) {
				//加载层-默认风格
				layer.load();
			},
			success: function (provinceList) {
				for (var i = 0; i < provinceList.length; i++) {
					var option = $("<option>" + provinceList[i].name + "</option>");
					option.prop("value", provinceList[i].id);
					$("#province").append(option);
				}
				changeProvince();
			},
			complete: function (XMLHttpRequest, textStatus) {
				// alert('远程调用成功，状态文本值：'+textStatus);
				layer.closeAll('loading');
			},
			error: function () {
				layer.msg('系统繁忙，请稍后再试', { icon: 2 });
			}
		})
	}


	function changeProvince() {
		$("#city").empty();
		var provinceId = $("#province").find("option:selected").prop("value");
		console.log(provinceId);
		$.ajax({
			type: "get",
			url: "../ucenter/address",
			data: "opr=province&pid=" + provinceId,
			dataType: "json",
			beforeSend: function (r) {
				//加载层-默认风格
				layer.load();
			},
			success: function (result) {
				for (var i = 0; i < result.length; i++) {
					var option = $("<option>" + result[i].name + "</option>");
					option.prop("value", result[i].id);
					$("#city").append(option);

				}
				changeCity();
			},
			complete: function (XMLHttpRequest, textStatus) {
				// alert('远程调用成功，状态文本值：'+textStatus);
				layer.closeAll('loading');
			},
			error: function () {
				layer.msg('系统繁忙，请稍后再试', { icon: 2 });
			}
		})

	}

	function changeCity() {
		$("#area").empty();
		var area = $("#city").find("option:selected").prop("value");
		console.log(area);
		$.ajax({
			type: "get",
			url: "../ucenter/address",
			data: "opr=province&pid=" + area,
			dataType: "json",
			beforeSend: function (r) {
				//加载层-默认风格
				layer.load();
			},
			success: function (result) {
				console.log(result)
				for (var i = 0; i < result.length; i++) {
					var option = $("<option>" + result[i].name + "</option>");
					option.prop("value", result[i].id);
					$("#area").append(option);
				}
			},
			complete: function (XMLHttpRequest, textStatus) {
				// alert('远程调用成功，状态文本值：'+textStatus);
				layer.closeAll('loading');
			},
			error: function () {
				layer.msg('系统繁忙，请稍后再试', { icon: 2 });
			}
		})
	}


	// //为保存按钮添加事件
	$("#save").click(function () {
		if ($("#id").val() == "") {
			let address = {
				"accept": $("#accept").val(),
				"province": $("#province").val(),
				"city": $("#city").val(),
				"area": $("#area").val(),
				"address": $("#address").val(),
				"telphone": $("#telphone").val(),
				"type": $("#type").prop("checked") ? '2' : '1',
				"opr": "add"
			}
			$.ajax({
				url: "../ucenter/address",
				type: "post",
				data: address,
				dataType: "json",
				beforeSend: function (r) {
					//加载层-默认风格
					layer.load();
				},
				success: function (result) {
					if (result.msg == "ok") {
						layer.alert("增加成功");
						$("#addressdata").empty();
						getAddresses();
						$("#cancel").trigger("click");
					} else {
						layer.msg(result.msg, { icon: 2 });
					}
				},
				complete: function (XMLHttpRequest, textStatus) {
					// alert('远程调用成功，状态文本值：'+textStatus);
					layer.closeAll('loading');
				},
				error: function () {
					layer.msg('系统繁忙，请稍后再试', { icon: 2 });
				}
			});
		} else {
			$("#type").prop("readonly", true)
			let address = {
				"id": $("#id").val(),
				"accept": $("#accept").val(),
				"province": $("#province").val(),
				"city": $("#city").val(),
				"area": $("#area").val(),
				"address": $("#address").val(),
				"telphone": $("#telphone").val(),
				"type": $("#type").prop("checked") ? '2' : '1',
				"opr": "update"
			}
			$.post("../ucenter/address", address, function (result) {
				if (result.msg == "ok") {
					layer.alert("修改成功");
					$("#addressdata").empty();
					getAddresses();
				} else {
					layer.msg(result.msg, { icon: 2 });
				}
			}, "json");
		}
	});

	$("#cancel").click(function () {
		$("#accept").val("");
		$("#province").val($("#province")[0].options[0].text);
		console.log($("#province").val($("#province")[0]["select"]));
		$("#city").val($("#city")[0].options[0].text);
		$("#area").val($("#area")[0].options[0].text);
		$("#address").val("");
		$("#telphone").val("");
		$("#type").prop("checked", false);
		$("#id").val("");
	});


	function update(id) {
		console.log(id);
		$.ajax({
			type: "get",
			url: "../ucenter/address",
			data: "opr=initupdate&id=" + id,
			dataType: "json",
			beforeSend: function (r) {
				//加载层-默认风格
				layer.load();
			},
			success: function (address) {
				gettProvice();
				$("#accept").val(address.consignee);
				$("#province").find("option:contains('" + address.province + "')").prop("selected", true);
				$("#city").find("option:contains('" + address.city + "')").prop("selected", true);
				$("#address").find("option:contains('" + address.address + "')").prop("selected", true);

				$("#address").val(address.street);
				$("#telphone").val(address.tel);
				$("#type").prop("checked", address.state == '2');
				$("#id").val(address.id);
			},
			complete: function (XMLHttpRequest, textStatus) {
				// alert('远程调用成功，状态文本值：'+textStatus);
				layer.closeAll('loading');
			},
			error: function () {
				layer.msg('系统繁忙，请稍后再试', { icon: 2 });
			}
		})



	}

	function del(id, address) {
		layer.confirm("确认删除吗？", function () {
			$.getJSON("../ucenter/address?opr=del&id=" + id, function (result) {
				if (result.msg == "ok") {
					layer.alert("删除成功", function (index) {
						$(address).parent().parent().remove();
						layer.close(index);
					});
				} else {
					layer.msg(result.msg, { icon: 2 });
				}
			})
		});
	}

	function setDefault(id) {
		$.post("../ucenter/address?opr=setdefault", { "id": id }, function (result) {
			if (result.msg == "ok") {
				layer.msg("设置成功", { icon: 1 });
				$("#addressdata").empty();
				getAddresses();
			} else {
				layer.msg(result.msg, { icon: 2 });
			}
		}, "json");
	}


</script>
<script id="tpl" type="text/html">
 {{each list as address}}
<tr>
	<td>{{address.consignee}}</td>
	<td>{{address.province}}{{address.city}}{{address.area}}</td>
	<td>{{address.street}}</td>
	<td>{{address.tel}}</td>
	<td><a class="blue" href='javascript:void(0)' onclick='update({{address.id}})'>修改</a>|
		{{if address.state == '2'}}
			默认地址
		{{/if}}
        {{if address.state == '1'}}
			<a class="blue" href="javascript:void(0)" onclick="del({{address.id}},this)">删除</a>|
			<a class="blue" href="javascript:void(0)" onclick="setDefault({{address.id}})">设为默认</a>
		{{/if}}
     </td>
	</tr>
{{/each}} 
</script>

<div class='tabs'>
	<div class="uc_title m_10 tabs_menu">
		<label class="current node"><span>地址管理</span></label>
	</div>
	<div class='tabs_content'>
		<div id="address_list" class="form_content m_10 node">
			<div class="uc_title2 m_10">
				<strong>已保存的有效地址</strong>
			</div>
			<table class="list_table" width="100%" cellpadding="0" cellspacing="0">
				<col width="120px" />
				<col width="120px" />
				<col width="240px" />
				<col width="120px" />
				<col width="150px" />
				<col />
				<thead>
					<tr>
						<th>收货人</th>
						<th>所在地区</th>
						<th>街道地址</th>
						<th>手机</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="addressdata">
				</tbody>
			</table>
		</div>
	</div>
</div>
<!--表单修改-->
<div class="orange_box" id='address_form'>
	<input type="hidden" id="id" value="">
	<table class="form_table" width="100%" cellpadding="0" cellspacing="0">
		<col width="120px" />
		<col />
		<caption>收货地址</caption>
		<tr>
			<th><span class="red">*</span> 收货人姓名：</th>
			<td><input id='accept' class="normal" type="text" /><label>收货人真实姓名，方便快递公司联系。</label></td>
		</tr>
		<tr>
			<th><span class="red">*</span> 所在地区：</th>
			<td><select name="province" id="province"></select> <select name="city" id="city"></select> <select
					name="area" id="area"></select></td>
		</tr>
		<tr>
			<th><span class="red">*</span> 街道地址：</th>
			<td><input name='address' id='address' class="normal" type="text" /><label>真实详细收货地址，方便快递公司联系。</label></td>
		</tr>
		<tr>
			<th>手机号码：</th>
			<td><input name='telphone' id='telphone' class="normal" type="text" /><label>手机号码，如：13588888888</label></td>
		</tr>
		<tr>
			<th>设为默认：</th>
			<td><label><input name="type" id="type" type='checkbox' value='y'></label></td>
		</tr>
		<tr>
			<th></th>
			<td><label class="btn"><input type="button" id="save" value="保存" /></label> <label class="btn"><input
						type="button" id="cancel" value="取消" /></label></td>
		</tr>
	</table>
</div>